<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF Viewer with Highlight</title>
    <link rel="stylesheet" href="./public/pdfjs/web/viewer.css" />
    <style>
      .ai-message {
        margin: 10px 0;
        padding: 8px 12px;
        border: 1px solid black;
        border-radius: 8px;
        background-color: #e0e0e0; /* AI消息的背景颜色 */
        text-align: left; /* AI消息左对齐 */
      }
      #pdf-viewer-container {
        width: 100%;
        height: 100vh;
        border: 1px solid #ccc;
        overflow: hidden;
      }
      /* 设置整个页面的布局 */
      .container {
        display: flex;
        height: 100vh; /* 100%视口高度，防止上下滚动 */
      }

      /* 左侧部分 */
      .left-side {
        flex: 1; /* 占据50%的宽度 */
        background-color: #f4f4f4; /* 背景颜色，用于显示区域 */
        overflow-y: hidden; /* 隐藏溢出的内容 */
        position: relative; /* 相对定位 */
        height: 100%; /* 设置高度 */
        border-right: 1px solid #000; /* 右侧黑色实线边框 */
        border-radius: 8px 0 0 8px; /* 左上角和左下角圆弧角 */
      }

      /* 右侧部分 */
      .right-side {
        flex: 1; /* 占据50%的宽度 */
        display: flex;
        flex-direction: column; /* 垂直布局 */
        border-left: 1px solid #000; /* 左侧黑色实线边框 */
        border-radius: 0 8px 8px 0; /* 右上角和右下角圆弧角 */
      }

      /* 右侧上部分 - 聊天窗口 */
      .chat-window {
        flex: 1; /* 占据剩余空间 */
        overflow-y: auto; /* 允许垂直滚动 */
        background-color: #fff; /* 背景颜色，可以根据需要调整 */
        padding: 10px; /* 内边距 */
        border-bottom: 1px solid #000; /* 下方黑色实线边框 */
        border-radius: 8px 8px 0 0; /* 上方圆弧角 */
      }

      /* 右侧下部分 - 输入框和按钮 */
      .input-area {
        display: flex;
        border-top: 1px solid #000; /* 上方黑色实线边框 */
        padding: 10px;
        background-color: #f4f4f4; /* 背景颜色，可以根据需要调整 */
        border-radius: 0 0 8px 8px; /* 下方圆弧角 */
      }

      /* 输入框 */
      .message-input {
        flex-grow: 1;
        margin-right: 5px; /* 右边距 */
        border: 1px solid #000; /* 黑色实线边框 */
        border-radius: 4px; /* 圆弧角 */
        padding: 8px; /* 内边距 */
      }

      /* 发送按钮 */
      .send-button {
        padding: 5px 10px;
        cursor: pointer;
        border: 1px solid #000; /* 黑色实线边框 */
        border-radius: 4px; /* 圆弧角 */
        background-color: #fff; /* 背景颜色 */
      }

      /* 选择附件按钮 */
      .attachment-button {
        padding: 5px 10px;
        cursor: pointer;
        border: 1px solid #000; /* 黑色实线边框 */
        border-radius: 4px; /* 圆弧角 */
        background-color: #fff; /* 背景颜色 */
      }
      .text-div {
        /* font-size: 16px;
        color: rgb(0, 0, 0); 字体颜色设置为深蓝色 */
        border: 1px solid black; /* 黑色实线边框 */
        border-radius: 8px; /* 圆弧角边框 */
        margin: 10px 0; /* 上下间距 */
        padding: 8px 12px; /* 内边距 */
        /* cursor: pointer; 鼠标悬停时显示指针 */
      }
      .text-p {
        font-size: 16px;
        color: rgb(0, 0, 0); /* 字体颜色设置为深蓝色 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left-side">
        <!-- 左侧内容 -->
        <!-- <button onclick="scrollToPagePosition(1, 1)">测试滚动到第1页中间</button> -->
        <iframe
          id="pdf-viewer-container"
          width="100%"
          height="100%"
          src="./public/pdfjs/web/viewer.html"
        ></iframe>
      </div>
      <div class="right-side">
        <div id="chatContent" class="chat-window">
          <!-- 聊天内容将在这里动态生成 -->
          <div id="response"></div>
        </div>
        <div class="input-area">
          <form id="uploadForm" enctype="multipart/form-data">
            <input type="text" class="message-input" name="message" placeholder="输入消息...">
            <button type="submit">发送消息</button>
            <!-- <input type="file" name="file" id="pdfFile" accept="application/pdf" required /> -->
            <input type="file" name="files" id="pdfFile" accept=".txt, .pdf, .md, .xlsx, .xls, .docx, .doc" multiple />
          </form>
        </div>
      </div>
    </div>

    <script>
    // 读取json配置
    var config;
    fetch("./config.json")
      .then(response => response.json())
      .then(data => {
        // 使用配置数据
        config = data
      })
      .catch(error => {
        // 处理错误
        console.error("Error:", error);
      });
      // 为每个<p>标签创建一个闭包，以存储独立的计数器
      function onclickAIMessage(coords_arr, length){
        let coords = coords_arr
        let len = length
        let count = -1
        return function() {
          count = (count + 1) % len
          console.log("count: ", count, "len: ", len)
          sendHighlightMessage(coords[count])
        }
      }

      function getFromData(){
        const formData = new FormData();
        const messageInput = document.querySelector(".message-input");
        const message = messageInput.value.trim();
        const fileInput = document.getElementById("pdfFile");
        const files = fileInput.files; // 获取文件列表

        if (message === "" && files.length === 0) {
          alert("消息和文件至少要有一个");
          return null;
        }
        // 检查是否有消息输入
        if (message !== "") {
          // 如果有消息，添加到 FormData 对象
          formData.append("message", message);
        } else {
          // 如果没有消息，添加一个值为 null 的字段
          // formData.append("message", null);
        }

        // 检查是否有文件上传
        if (files.length > 0) {
          // 如果有文件，添加到 FormData 对象
          for (let i = 0; i < files.length; i++) {
            formData.append("files", files[i]);
          }
        } else {
          // 如果没有文件，添加一个值为 null 的字段
          // formData.append("files", null);
        }
        pdfview = iframe.contentWindow.PDFViewerApplication
        console.log(pdfview.page, "----", pdfview.pagesCount)
        formData.append("current_page_n", pdfview.page)
        // 显示消息
        displayMessage(message, "user");
        return formData;
      }

      const iframe = document.getElementById("pdf-viewer-container");
      const chatContent = document.getElementById("chatContent")
      let textBlocks = []
      document.getElementById("uploadForm").addEventListener("submit", function (event) {
          event.preventDefault()
          const formData = getFromData()
          if (formData === null){
            return
          }
          let div = document.createElement('div');
          div.className = 'text-div';
          div.innerHTML = '正在思考 . . .'
          div.id = 'thinking'
          chatContent.appendChild(div);
          // 保持原有的后端上传逻辑
          fetch("http://"+ config.LLMHost.host+":"+config.LLMHost.port +"/upload-pdf", {
            method: "POST",
            body: formData,
          })
          .then((response) => {
            if (!response.ok) {
              throw new Error("Network response was not ok: " + response.statusText);
            }
            return response.json();
          })
          .then((data) => {
            const new_pdf_src = "./public/pdfjs/web/viewer.html?file=http://" + config.LLMHost.host + ":" + config.LLMHost.port + data.file_path;
            let str = iframe.src
            let startIndex = str.indexOf("file=") + "file=".length;
            let result = str.substring(startIndex);
            let url = "http://" + config.LLMHost.host + ":" + config.LLMHost.port + data.file_path
            if (url !== decodeURIComponent(result)){
              iframe.src = new_pdf_src;
            }
            console.log(data);
            textBlocks = data.block_info;
            div = document.getElementById("thinking");
            div.remove(); // 移除“正在思考”的消息

            const pElements = []; // 创建一个数组来存储所有的p元素
            textBlocks.forEach(item => {
              const p = document.createElement('p');
              p.textContent = item.text;
              p.className = 'text-p';
              // div = document.getElementById("thinking");

              if (item.coords.length > 0){
                p.style.cursor = 'pointer';
                p.onclick = onclickAIMessage(item.coords, item.coords.length)
              }
              pElements.push(p); // 将p元素添加到数组中
            });
            displayAIMessage(pElements);
            // 清空输入框
            document.getElementById("uploadForm").reset()
          })
          .catch((error) => console.error("Error:", error));
        });

      function displayAIMessage(pElements) {
        const chatContent = document.getElementById("chatContent");
        const aiMessageDiv = document.createElement('div');
        aiMessageDiv.className = 'text-div ai-message'; // 为AI消息添加特定的类
        // 将所有p元素添加到aiMessageDiv中
        pElements.forEach(p => aiMessageDiv.appendChild(p));
        chatContent.appendChild(aiMessageDiv);
        // 滚动到聊天窗口底部
        chatContent.scrollTop = chatContent.scrollHeight;
      }

      function displayMessage(message, sender) {
        const chatContent = document.getElementById("chatContent");
        const div = document.createElement('div');
        div.className = 'text-div';
        div.textContent = message;
        if (sender === "ai") {
          div.style.textAlign = 'right';
        }
        chatContent.appendChild(div);
        // 滚动到聊天窗口底部
        chatContent.scrollTop = chatContent.scrollHeight;
      }
      // 封装发送消息的函数
      function sendHighlightMessage(highlightCoordinates) {
        // 检查iframe是否加载完成
        if (iframe.contentWindow) {
          // 使用 postMessage 向 iframe 发送高亮信息
          console.log("定位的页码：", highlightCoordinates[0].pageNum, "顶部距离：", 1-highlightCoordinates[0].top/100+0.2)
          scrollToPagePosition(highlightCoordinates[0].pageNum, 1-highlightCoordinates[0].top/100+0.2)
          console.log("发送高亮消息");
          console.log(highlightCoordinates)
          iframe.contentWindow.postMessage(
            { type: "highlight", coords: highlightCoordinates },
            "*"
          );
        } else {
          console.log("Iframe未加载完成");
        }
      }
      
      /**
       * 滚动到指定页面的指定位置
       * @param {number} pageNumber - 目标页码
       * @param {number} percentage - 滚动百分比 (0-1)，1到当前页面的顶部，0到当前页面的底部
       */
      async function scrollToPagePosition(pageNumber, percentage) {
          // 等待iframe加载完成
          if (!iframe.contentWindow.PDFViewerApplication?.initialized) {
              console.error('PDF viewer 未初始化');
              return;
          }
          
          try {
              // 使用iframe内部的PDFViewer API
              page = await iframe.contentWindow.PDFViewerApplication.pdfDocument.getPage(pageNumber);
              hieght = page.getViewport({ scale: 1 }).height;

              iframe.contentWindow.PDFViewerApplication.pdfViewer.scrollPageIntoView({
                  pageNumber: pageNumber,
                  destArray: [null, { name: 'XYZ' }, null, percentage * hieght]
              });
          } catch (error) {
              console.error('滚动失败:', error);
          }
      }
    </script>
  </body>
</html>
